<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12_固定定位广告条</title>
    <style>
        .top{
            background-color: #5AA4AE;
            height: 120px;
            color: #fff;
            font-size: 30px;
            position: fixed;
            top: 0;
            width: 100%;
        }
        .main{
            margin-top: 130px;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #fff799;
            left: 20px;
        }
        .right{
            background-color: #f35536;
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <div class="main">
        我是内容
        <div>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti et eum magni saepe. Adipisci
                consectetur culpa error est impedit incidunt molestias nobis quas sequi tempora. A alias cumque omnis
                veritatis.
            </div>
            <div>Accusantium atque ea facere illum laboriosam praesentium voluptatibus? Aperiam architecto beatae,
                blanditiis dolorem eaque eligendi excepturi hic impedit ipsum laborum maxime minima molestias natus
                officia quis, reprehenderit, suscipit vero voluptatibus.
            </div>
            <div>Ab accusamus at atque, cumque debitis deserunt dicta dolorum eos harum illo impedit ipsum itaque
                laboriosam laborum magnam molestias nesciunt, numquam odio placeat possimus quasi quia quod reiciendis
                repellat ullam.
            </div>
            <div>Aut, quas, quo! Amet ducimus explicabo quisquam voluptates. Doloremque error excepturi illum optio
                quibusdam quidem quo repellat rerum? Commodi cumque delectus dolore illum numquam quas quis rem sequi ut
                voluptatem.
            </div>
            <div>Aliquam architecto beatae dignissimos excepturi incidunt nam odit ratione sapiente sit temporibus. Ad
                aliquam aperiam architecto corporis dolore, dolores dolorum eaque eveniet, harum maiores, minima natus
                nobis pariatur sint ut.
            </div>
            <div>Aliquam consectetur consequatur consequuntur dolor doloribus enim, error, esse facilis in minus modi
                molestias nostrum officia, pariatur possimus praesentium provident quaerat quibusdam quisquam
                repudiandae sed tempore temporibus vero voluptate voluptatibus.
            </div>
            <div>Aliquid architecto cupiditate dicta dolor dolores eaque excepturi fugit id impedit in iure, laborum
                modi natus, nisi odit omnis pariatur quasi quisquam quos repellendus soluta totam ullam vitae. Fugit,
                quos!
            </div>
            <div>Deserunt doloribus ea eligendi esse facere id iusto, nesciunt optio quod reprehenderit rerum sapiente
                sit velit! Enim, ex exercitationem magnam natus nobis odio pariatur placeat praesentium quisquam
                reprehenderit ullam voluptas.
            </div>
            <div>Distinctio earum id itaque repellat rerum, veritatis. Consectetur incidunt necessitatibus reiciendis
                repellendus tempora unde. Aliquam assumenda eos magnam quod quos? Aliquid, eveniet natus nisi officia
                porro sint ullam ut voluptas.
            </div>
            <div>Aut dignissimos dolorem enim laboriosam laudantium magnam maiores molestiae rem sequi voluptate?
                Aliquid aperiam consectetur dolor doloremque dolores, eos expedita magnam nam nisi quisquam, quo quod
                tempore totam? Maxime, odit?
            </div>
            <div>Adipisci distinctio dolorum esse fugiat fugit harum nihil nobis nostrum optio porro quasi soluta, velit
                veniam? Accusantium dolor ducimus illo laboriosam, perspiciatis recusandae repellendus totam? Eos quas
                quasi repellendus vitae?
            </div>
            <div>A alias at commodi corporis, culpa eius eligendi enim est in inventore ipsum iure labore magnam modi
                natus neque, perferendis quae quasi quis quod repellat voluptate voluptatem. Magni, odio reiciendis.
            </div>
            <div>Aliquam assumenda, corporis eius exercitationem fugit labore perferendis quas quis. Animi at culpa
                ipsam itaque quas quos vero? Corporis dignissimos dolore dolores exercitationem necessitatibus nulla
                obcaecati perspiciatis quam tempora tempore?
            </div>
            <div>A atque aut cupiditate doloribus dolorum ea eaque eligendi eveniet, excepturi facere illum ipsam maxime
                nam odio officiis perferendis placeat possimus quaerat quas quos repudiandae saepe, temporibus ullam
                veniam voluptatem.
            </div>
            <div>Autem consectetur doloremque eos esse eveniet exercitationem facilis fugit, hic impedit ipsum neque
                omnis provident quidem quo sed sunt ut, velit vitae. Commodi deserunt fugit magnam praesentium sapiente
                tempora ullam.
            </div>
            <div>Commodi consequatur consequuntur corporis doloribus esse iure laborum libero modi neque, nulla placeat
                provident quae quasi repellendus unde! Blanditiis eius, magni nemo odit pariatur quia quibusdam sed
                vitae! Ipsum, laborum.
            </div>
            <div>Aperiam aut autem, debitis doloremque fuga libero officia pariatur, quasi qui quos recusandae, saepe
                velit! Animi aspernatur dignissimos doloribus eum ex harum hic laboriosam nulla quas, reiciendis, rem
                sed voluptatum.
            </div>
            <div>Assumenda blanditiis ducimus eveniet iste nesciunt nostrum pariatur quia, sapiente temporibus
                voluptatum! Culpa nobis reprehenderit sit. Animi aspernatur fugiat inventore nulla numquam odio quae quo
                sapiente sequi tempore. Numquam, temporibus.
            </div>
            <div>Aperiam, cupiditate exercitationem explicabo facilis labore magni nobis numquam omnis perspiciatis
                quis, reiciendis sequi! Atque deserunt est fuga labore praesentium quas quis rem repellendus! Cumque
                delectus exercitationem iste nesciunt similique!
            </div>
            <div>Ab dolorem excepturi explicabo, hic iste magni optio pariatur recusandae ut voluptate. Eius, eligendi,
                eveniet! Animi dolor eius excepturi, explicabo illum inventore ipsam iusto, molestias neque nihil
                officia repellat ullam.
            </div>
            <div>Alias autem commodi dolor dolore ex. Accusantium amet commodi corporis esse exercitationem fugit
                impedit magni, molestiae nam nemo odit omnis perferendis praesentium quasi quis, quisquam sit voluptas.
                Cum, dignissimos, perferendis.
            </div>
            <div>A accusantium amet architecto commodi, culpa cupiditate dignissimos dolorem eaque eveniet excepturi
                fugiat hic laudantium libero minima modi neque nihil nobis, nulla porro quidem quod reiciendis rem
                tenetur vitae voluptatem!
            </div>
            <div>Consequuntur corporis doloribus eos magni perferendis praesentium, reprehenderit tempore? Animi
                consequuntur, culpa eos ex fugiat impedit ipsam ipsum, natus neque nihil nobis odio pariatur perferendis
                praesentium tempora temporibus voluptas voluptatibus.
            </div>
            <div>Accusamus architecto consequuntur cupiditate deserunt dolorum esse ex excepturi facere iure minima
                molestiae natus necessitatibus nemo nobis non nulla officia pariatur, provident quam qui, quis rem
                repellat repellendus suscipit tempore!
            </div>
            <div>Alias aliquam architecto aspernatur atque beatae consequuntur dignissimos dolores dolorum eveniet
                excepturi hic id incidunt ipsum maiores maxime minima perferendis placeat, quaerat quasi quidem quod
                reprehenderit totam vel veniam voluptates!
            </div>
            <div>Autem commodi dolorem ea excepturi fugit, harum id mollitia nam nemo omnis quidem repellendus vitae
                voluptatum. Accusamus assumenda aut consequatur, dignissimos dolorem laborum nam officiis quaerat quam
                voluptas? Consequuntur, quisquam.
            </div>
            <div>Aspernatur at consequuntur cumque deleniti dicta dolores ducimus est ex excepturi illo itaque
                necessitatibus numquam possimus quia quibusdam, quisquam quos, reiciendis repudiandae. Aliquid at autem
                cupiditate explicabo inventore recusandae vel?
            </div>
            <div>Deleniti fuga, id ipsam iste magnam mollitia natus nisi odio quaerat quos reprehenderit, ullam ut
                voluptatum! Cupiditate fuga sapiente sunt tempore. Commodi eum harum nihil odit quidem recusandae soluta
                voluptate?
            </div>
            <div>Adipisci consequuntur cum cumque, delectus dicta dignissimos dolor dolorem eius, et facere inventore
                iusto maxime minima nemo optio praesentium repellat saepe sapiente tempora velit. Aut et laborum libero
                non ratione!
            </div>
            <div>Delectus itaque modi molestias ratione totam vel. Ad alias consequuntur cum delectus, distinctio
                doloremque dolores eos illo laborum nam natus nisi obcaecati odit omnis pariatur, qui quisquam,
                repudiandae sapiente? Iure?
            </div>
        </div>
    </div>
</body>
</html>